<template>
	<view>
		<view class="yxfooter" v-if="data_list.length > 0 && is_tabber">
			<block v-if="is_second_footer_nav == 1">
				<movable-area v-if="!isCollapsed" :class="'secfoot-movable-container '" :style="'height: calc(100% - ' + height_dec + 'rpx);top:' + top + 'rpx;'">
				    <movable-view direction="all" :x="x" :y="positionY" :animation="false" class="secfoot-event-submit">
						<view class="bottom-nav-box pr" style="">
							<view class="bottom-nav" style="">
								<view class="nav-item" data-value="/pages/index/index" data-type="1" @tap="navigation_event">
									<uni-icons type="shop" size="24"></uni-icons>
									<text>商城首页</text>
								</view>
								<view class="nav-item" data-value="/pages/goods-category/goods-category" data-type="1" @tap="navigation_event">
									<uni-icons type="bars" size="24"></uni-icons>
									<text>分类</text>
								</view>
								<view class="nav-item" data-value="/pages/cart/cart" data-type="1" @tap="navigation_event">
									<uni-icons type="cart" size="24"></uni-icons>
									<text>购物车</text>
								</view>
							</view>
							<!-- 关闭按钮 -->
							<view class="close-btn" @tap="collapse">
							  <text class="close-icon">×</text>
							</view>
						</view>
				    </movable-view>
				</movable-area>
				<!-- 收起状态的半圆提示 -->
				<view v-else class="collapsed-trigger" :style="triggerstyle" @tap="expand">
				    <uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
				</view>
			</block>
			
		    <view class="neifoot bottom-line-exclude" :style="yxfooterstyle">
		        <view class="neitop">
		            <view class="weui-flex">
						<block v-for="(item, index) in data_list" :key="index">
							<view class="weui-flex__item pr" :data-value="item.pagePath" data-type="1" @tap="navigation_event">
								<block v-if="data_list.length == 3">
									<block v-if="index == 1">
										<block v-if="(data_base.is_middle_nav_up || null) != null && data_base.is_middle_nav_up == 1">
											<view class="publish" :style="'background:'+foot_tabbar_text_color_on+';'">
												<image class="topavatar" :src="item.iconPath" />
											</view>
										</block>
										<block v-else-if="(data_base.is_middle_nav_text || null) != null && data_base.is_middle_nav_text == 1">
											<view v-if="propStatus == item.pagePath" class="putong">
												<image class="topavatar" :src="item.selectedIconPath" />
											</view>
											<view v-else class="putong">
												<image class="topavatar" :src="item.iconPath" />
											</view>
										</block>
										<block v-else>
											<view v-if="propStatus == item.pagePath" class="on">
											    <image class="topavatar" :src="item.selectedIconPath" />
											    <text class="title" :style="'color:'+foot_tabbar_text_color_on">{{item.text}}</text>
											</view>
											<view v-else>
											    <image class="topavatar" :src="item.iconPath" />
											    <text class="title" :style="'color:'+foot_tabbar_text_color">{{item.text}}</text>
											</view>
											<view v-if="item.pagePath == '/pages/cart/cart'" class="cart_num_box pa">
												<component-badgeyx :propNumber="foot_car_num" propColor="#ffffff" propBgColor="#FF3B30"></component-badgeyx>
											</view>
										</block>
									</block>
									<block v-else>
										<view v-if="propStatus == item.pagePath" class="on">
										    <image class="topavatar" :src="item.selectedIconPath" />
										    <text class="title" :style="'color:'+foot_tabbar_text_color_on">{{item.text}}</text>
										</view>
										<view v-else>
										    <image class="topavatar" :src="item.iconPath" />
										    <text class="title" :style="'color:'+foot_tabbar_text_color">{{item.text}}</text>
										</view>
										<view v-if="item.pagePath == '/pages/cart/cart'" class="cart_num_box pa">
											<component-badgeyx :propNumber="foot_car_num" propColor="#ffffff" propBgColor="#FF3B30"></component-badgeyx>
										</view>
									</block>
								</block>
								<block v-else-if="data_list.length == 5">
									<block v-if="index == 2">
										<block v-if="(data_base.is_middle_nav_up || null) != null && data_base.is_middle_nav_up == 1">
											<view class="publish" :style="'background:'+foot_tabbar_text_color_on+';'">
												<image class="topavatar" :src="item.iconPath" />
											</view>
										</block>
										<block v-else-if="(data_base.is_middle_nav_text || null) != null && data_base.is_middle_nav_text == 1">
											<view v-if="propStatus == item.pagePath" class="putong">
												<image class="topavatar" :src="item.selectedIconPath" />
											</view>
											<view v-else class="putong">
												<image class="topavatar" :src="item.iconPath" />
											</view>
										</block>
										<block v-else>
											<view v-if="propStatus == item.pagePath" class="on">
											    <image class="topavatar" :src="item.selectedIconPath" />
											    <text class="title" :style="'color:'+foot_tabbar_text_color_on">{{item.text}}</text>
											</view>
											<view v-else>
											    <image class="topavatar" :src="item.iconPath" />
											    <text class="title" :style="'color:'+foot_tabbar_text_color">{{item.text}}</text>
											</view>
											<view v-if="item.pagePath == '/pages/cart/cart'" class="cart_num_box pa">
												<component-badgeyx :propNumber="foot_car_num" propColor="#ffffff" propBgColor="#FF3B30"></component-badgeyx>
											</view>
										</block>
									</block>
									<block v-else>
										<view v-if="propStatus == item.pagePath" class="on">
										    <image class="topavatar" :src="item.selectedIconPath" />
										    <text class="title" :style="'color:'+foot_tabbar_text_color_on">{{item.text}}</text>
										</view>
										<view v-else>
										    <image class="topavatar" :src="item.iconPath" />
										    <text class="title" :style="'color:'+foot_tabbar_text_color">{{item.text}}</text>
										</view>
										<view v-if="item.pagePath == '/pages/cart/cart'" class="cart_num_box pa">
											<component-badgeyx :propNumber="foot_car_num" propColor="#ffffff" propBgColor="#FF3B30"></component-badgeyx>
										</view>
									</block>
								</block>
								<block v-else>
									<view v-if="propStatus == item.pagePath" class="on">
										<image class="topavatar" :src="item.selectedIconPath" />
										<text class="title" :style="'color:'+foot_tabbar_text_color_on">{{item.text}}</text>
									</view>
									<view v-else>
										<image class="topavatar" :src="item.iconPath" />
										<text class="title" :style="'color:'+foot_tabbar_text_color">{{item.text}}</text>
									</view>
									<view v-if="item.pagePath == '/pages/cart/cart'" class="cart_num_box pa">
										<component-badgeyx :propNumber="foot_car_num" propColor="#ffffff" propBgColor="#FF3B30"></component-badgeyx>
									</view>
								</block>
							</view>
						</block>
		            </view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import componentBadgeyx from "@/pages/common/badge/badge";
	const app = getApp();
	import {system_base_info} from "@/common/js/common/common";
	
	var common_static_url = app.globalData.get_static_url('common');
	export default {
		data() {
			return {
				common_static_url: common_static_url,
				data_list: [],
				foot_tabbar_bg_color:'#ffffff',
				foot_tabbar_text_color:'#8a8a8a',
				foot_tabbar_text_color_on:'#c32a2c',
				yxfooterstyle:'',
				foot_car_num:0,
				is_tabber:false,
				data_base: null,
				secfooterstyle: '',
				is_second_footer_nav: app.globalData.data.is_second_footer_nav,
				x: 0,
				y: 0,
				top: 180,
				height_dec: 250,
				triggerstyle: '',
				
				isCollapsed: true,
				positionY: 0,
				// 屏幕尺寸
				screenWidth: 375,
				screenHeight: 667,
				// 面板尺寸
				panelHeight: 200
			}
		},
		components: {
		    componentBadgeyx
		},
		props: {
		    propStatus: {
				type: [Number,String],
				default: '/pages/index/index'
			},
			propCartNum: {
				type: [Number,String],
				default: 0
			},
			propRandom: {
				type: [String,Number],
				default: 0
			}
		},
		// 属性值改变监听
		watch: {
			propCartNum(value, old_value) {
			    this.setData({
			        foot_car_num: value,
			    });
			},
			// 数据
			propRandom(value, old_value) {
				this.init_before();
			}
		},
		// 页面被展示
		created: function() {
			this.init_before();
		},
		methods: {
			// 获取系统信息
			getSystemInfo() {
			  const systemInfo = uni.getSystemInfoSync();
			  this.screenWidth = systemInfo.windowWidth;
			  this.screenHeight = systemInfo.windowHeight;
			  // 初始化位置
			  this.positionY = systemInfo.windowHeight - this.panelHeight - 100;
			},

			// 收起面板
			collapse() {
			  this.isCollapsed = true
			},
			
			// 展开面板
			expand() {
			  this.isCollapsed = false
			},
			    
			init_before(){
				// 先获取语言基础信息
				system_base_info()
				.then(data=>{
					// 数据设置
					var system = app.globalData.get_system_info(null, null, true);
					var height = app.globalData.window_height_handle(system);
					var width = app.globalData.window_width_handle(system.windowWidth);
					this.setData({
					    y: height - 300,
						positionY: height - 300,
						triggerstyle: 'top:'+(height - 300)+'px;'
					});
					
					// #ifdef APP-PLUS
					if(app.globalData.check_app_disagree_simple()){
						this.init_config(data);
					}
					// #endif
					// #ifndef APP-PLUS
					this.init_config(data);
					// #endif
				});
			},
			// 初始化配置
			init_config(data) {//console.log('----->footer data');console.log(data);
			    let bottomsafeHeight = 0;
				let safeAreaInsets = app.globalData.get_system_info('safeAreaInsets');
				// 底部安全高度，微信、百度（开发者工具暂不支持，真机有效）、抖音、飞书、支付宝小程序（iOS真机）、华为快应用
				bottomsafeHeight = ((safeAreaInsets || null) !=null && (safeAreaInsets.bottom || null) != null) ? safeAreaInsets.bottom : 0;
				// 如果安全高度大于0，则计算样式，否则采用CSS的样式
				let secfooterstyle = '';
				if(parseFloat(bottomsafeHeight) > 0)
				{
					secfooterstyle = 'bottom:calc(65rpx + '+parseFloat(bottomsafeHeight)+'px);';
				}
				// 是否打开次级导航
				let is_second_footer_nav = app.globalData.data.is_second_footer_nav;
				if(is_second_footer_nav == 1)
				{
					// 开关开启后，判断当前页面是否在可以显示二级导航的列表中
					let page = this.propStatus;
					page = app.globalData.current_page(false);
					//console.log('this page is ---->'+page);
					let is_allow_page = app.globalData.is_tabbar_pages_handle(app.globalData.data.second_footer_list, '/'+page);
					//console.log('this page is_allow_page ---->'+is_allow_page);
					if(!is_allow_page)
					{
						is_second_footer_nav = 0;
					}
					//console.log('----> this page is_allow_page '+is_second_footer_nav);
				}
				var fccprouniapp_data = data.base;
				var foot_tabbar_bg_color = fccprouniapp_data.foot_tabbar_bg_color;
				var yxfooterstyle = 'background:'+foot_tabbar_bg_color+';';//height:calc(96rpx + '+bottomsafeHeight+'px);
				var is_tabber = ((fccprouniapp_data.is_close_foot_nav || null) != null && parseInt(fccprouniapp_data.is_close_foot_nav) == 1) ? false : true;
				this.setData({
					is_second_footer_nav: is_second_footer_nav,
					secfooterstyle: secfooterstyle,
					data_base: fccprouniapp_data,
					data_list: fccprouniapp_data.foot_nav || [],
					foot_tabbar_bg_color: foot_tabbar_bg_color,
					yxfooterstyle:yxfooterstyle,
					foot_tabbar_text_color: fccprouniapp_data.foot_tabbar_text_color || '#8a8a8a',
					foot_tabbar_text_color_on: fccprouniapp_data.foot_tabbar_text_color_on || '#c32a2c',
					is_tabber: is_tabber,
				});
				if(is_tabber)
				{
					this.$emit('onFooterHeight', 52);//赋予一个特殊值
				}
			},

			navigation_event(e) {
				app.globalData.operation_event(e);
			}
		}
	}
</script>

<style lang="scss">
/*公共样式*/
.yxfooter .h50 {
    height: 100rpx;
}
.yxfooter .neifoot {
    height: 96rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #eee;
    z-index: 103;
}
/* #ifdef H5 */
@media only screen and (min-width:800px) {
   .yxfooter .neifoot {
	   max-width: 800px !important;
	   left:50%;
	   margin-left:-400px;
   }
}
/* #endif */
.yxfooter .h60 {
    height: 60px;
    width: 100%;
    display: block;
}
.yxfooter .neitop {
    padding: 6rpx 0;
    font-size: 24rpx;
    text-align: center;
    position: relative;
}
.yxfooter .neitop .topavatar {
    width: 50rpx;
    height: 50rpx;
    display: block;
    margin: auto;
}
.yxfooter .neitop .topavatar2 {
    width: 80rpx;
    height: 80rpx;
    display: block;
    margin: auto;
    border-radius: 40rpx;
    background: #fff;
    position: relative;
}
.yxfooter .neitop .topavatar2 .topavatar {
    position: absolute;
    left: 15rpx;
    top: 15rpx;
}
.yxfooter .neitop .title {
    line-height: 40rpx;
}
.cart_num_box{width:22rpx;height:20rpx;left:60%;top:-10rpx;}

.yxfooter .publish {
  background-color: #007aff;
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin:auto;
  margin-top: -40rpx;
}
.yxfooter .putong{
	border: 1rpx solid #000; 
	width: 60rpx; 
	border-radius: 10rpx;
	padding-bottom: 3rpx; 
	display: flex; 
	justify-content: center; 
	align-items: center;
	margin:auto;
	margin-top: 20rpx;
}

/*次导航漂浮*/
.secfoot-movable-container {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: transparent;
	pointer-events: none;
	z-index: 2;
}
.secfoot-event-submit {
	pointer-events: auto;
	height: 90rpx;
	width: 380rpx;
	border-radius: 50%;
}
.bottom-nav-box{
	
}
.bottom-nav {
	height: 90rpx;
	width: 360rpx;
	border-radius: 60rpx;
	/*background-color: #ffffff;*/
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding:0 0rpx;
	overflow: hidden;
}

.bottom-nav .nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgba(255, 255, 255, 0.5);
	padding: 12rpx 0;
	backdrop-filter: blur(10px);
	transition: all 0.2s ease;
	width:120rpx;
}

.bottom-nav .nav-item text {
	font-size: 20rpx;
	margin-top: 4rpx;
}

.bottom-nav .nav-item text.t1 {
	margin-top: 10rpx;
}

.bottom-nav .nav-item:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.98);
}

/* 关闭按钮 */
.close-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  background: #ff4757;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.close-icon {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
/* 收起状态的半圆触发器 */
.collapsed-trigger {
  position: fixed;
  left: -20px;
  width: 40px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #007aff 100%);
  border-radius: 0 30px 30px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  transition: all 0.3s ease;
  z-index: 2;
}

.collapsed-trigger:active {
  transform: translateX(5px);
}

.trigger-icon {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}
</style>
